<template>
	<view style="padding-bottom: 140rpx;">
		<view class="headtop"></view>
		<view class="content">
			<view v-if="orderInfo.hopeTime && orderInfo.indentState==2" class="titl">已接单，请在预约时间内抵达起点</view>
			<view class="titl" v-if="orderInfo.indentState==2 && !orderInfo.hopeTime">已接单，请尽快到达起点</view>
			<view class="titl" v-if="orderInfo.indentState==3">装货中</view>
			<view class="titl" v-if="orderInfo.indentState==4">运输中</view>
			<view class="titl" v-if="orderInfo.indentState==5">卸货中</view>
			<view class="titl" v-if="orderInfo.indentState==6">订单已完成</view>
			<view class="titl" v-if="orderInfo.indentState==7">订单完成待补费</view>
			<view class="titl" v-if="orderInfo.indentState==8">订单已取消</view>
			<view class="boxa">
				<view v-for="(addr,aindex) in orderInfo.addressList" :key="addr.addressId">
					<view class="addbox margin-lr" :class="{'padding-bottom-xl':aindex != orderInfo.addressList.length-1}">
						<view class="add_cont">
							<view class="green" v-if="aindex == 0"></view>
							<view class="orgin" v-else-if="aindex == orderInfo.addressList.length-1"></view>
							<view class="gray" v-else></view>
							<view>
								<view class="add_tit">{{addr.address}}</view>
								<view class="flex align-center">
									<view class="add_tit margin-top-xs">{{addr.userName}}</view>
									<view class="add_tit margin-left-xl margin-top-xs d-flex d-flex-middle" @click="callPhone(addr.userPhone)">
										<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/dianhua.png" style="margin-right: 6rpx;width: 36rpx;height:36rpx"></image>
										<text>{{addr.userPhone}}</text>
									</view>
								</view>
							</view>
						</view>
						<view @click="openMap(addr.lat,addr.lng,addr.address)">
							<image :src="aindex != (orderInfo.addressList.length -1)?'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/ladd.png':'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/hadd.png'" style="width: 30rpx;height: 35rpx;"></image>
						</view>
					</view>
				</view>
				<!-- <view v-show="orderInfo.startAddress" class="addbox  margin-lr padding-bottom-xl">
					<view class="add_cont">
						<view class="green"></view>
						<view>
							<view class="add_tit">{{orderInfo.startAddress}}</view>
							<view class="flex align-center">
								<view class="add_tit margin-top-xs">{{orderInfo.startUserName}}</view>
								<view class="add_tit margin-left-xl margin-top-xs">{{maskPhoneNumber(orderInfo.startUserPhone)}}</view>
								<image @click="callPhone(orderInfo.startUserPhone)" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/phone.png" class="margin-top-xs margin-left-xs"
									style="width: 28rpx;height: 28rpx;"></image>
							</view>
						</view>
					</view>
					<view @click="openMap(orderInfo.startLat,orderInfo.startLng,orderInfo.startAddress)">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/ladd.png" style="width: 30rpx;height: 35rpx;"></image>
					</view>
				</view>
				<view v-show="orderInfo.endAddress" class="addbox  margin-lr">
					<view class="add_cont">
						<view class="orgin"></view>
						
						<view>
								<view class="add_tit">{{orderInfo.endAddress}}</view>
								<view class="flex align-center">
									<view class="add_tit margin-top-xs">{{orderInfo.endUserName}}</view>
									<view class="add_tit margin-left-xl margin-top-xs">{{maskPhoneNumber(orderInfo.endUserPhone)}}</view>
									<image @click="callPhone(orderInfo.endUserPhone)" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/phone.png" class="margin-top-xs margin-left-xs"
										style="width: 28rpx;height: 28rpx;"></image>
								</view>
							</view>
					</view>
					<view @click="openMap(orderInfo.endLat,orderInfo.endLng,orderInfo.endAddress)">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/image/hadd.png" style="width: 30rpx;height: 35rpx;"></image>
					</view>
				</view> -->
				
				
				<view class="margin-tb" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
				<view class="flex align-center justify-between padding-lr ">
					<view v-show="orderInfo.indentDistance" class=" text-gray">距离货地<text
							style="color: #333333;">{{orderInfo.indentDistance}}</text>
					</view>
					<view v-show="orderInfo.riderMoney" class="flex align-center">预估
						<view style="color: #FF2020;font-size: 32rpx;">
							<text>¥</text><text class="text-bold"
								style="font-size: 42rpx;">{{orderInfo.riderMoney}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-show="orderInfo.riderMoney" class="box padding flex align-center justify-between">
				<view class="text-lg text-bold">费用合计</view>
				<view class=" text-bold" style="color: #FF4B36;font-size: 38rpx;">￥{{orderInfo.riderMoney}}</view>
			</view>
			<!-- <view class="box flex align-center">
				<image :src="orderInfo.avatar?orderInfo.avatar:'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/logo.png'"
					style="width: 90rpx;height: 90rpx;border-radius: 50%;"></image>
				<view class="margin-left-sm flex align-center justify-between" style="width: 80%;">
					<view>
						<view v-show="orderInfo.shipUserName" class="titls">{{orderInfo.shipUserName}}</view>
						<view v-show="orderInfo.shipUserPhone" class="margin-top-xs"
							style="color: #999999;font-size: 26rpx;">
							{{maskPhoneNumber(orderInfo.shipUserPhone)}}
						</view>
					</view>
					<view>
						<image @click="callPhone(orderInfo.shipUserPhone)" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/huoyunsf/phone.png"
							style="width: 42rpx;height: 52rpx;"></image>
					</view>
				</view>
			</view> -->
			<view class="box padding" style="color: #1C1C1C;">
				<view class="titls">接单信息</view>

				<view v-if="orderInfo.indentType == 2" class="flex align-center justify-between margin-top">
					<view class="text-gray">预约时间</view>
					<view>{{orderInfo.hopeTime}}</view>
				</view>
				<view v-show="orderInfo.peopleNum" class="flex align-center justify-between margin-top">
					<view class="text-gray">跟车人数</view>
					<view>{{orderInfo.peopleNum}}人</view>
				</view>
				<view v-show="orderInfo.shipUserPhone" class="flex align-center justify-between margin-top">
					<view class="text-gray">联系方式</view>
					<view>{{maskPhoneNumber(orderInfo.shipUserPhone)}}</view>
				</view>
				<view v-if="orderInfo.modelName" class="flex align-center justify-between margin-top">
					<view class="text-gray">订单车型</view>
					<view>{{orderInfo.modelName}}</view>
				</view>
				<view v-if="orderInfo.typeName" class="flex align-center justify-between margin-top">
					<view class="text-gray">订单车厢</view>
					<view>{{orderInfo.typeName}}</view>
				</view>
				<view v-if="orderInfo.remarks" class="flex align-center justify-between margin-top">
					<view class="text-gray">订单备注</view>
					<view>{{orderInfo.remarks}}</view>
				</view>
			</view>
			<view class="box " style="color: #999999;">
				<view class="titls">订单信息</view>
				<view v-show="orderInfo.indentNumber" class="flex align-center justify-between margin-top">
					<view>订单号码</view>
					<view>{{orderInfo.indentNumber}}</view>
				</view>
				<view v-show="orderInfo.createTime" class="flex align-center justify-between margin-tb-xl">
					<view>下单时间</view>
					<view>{{orderInfo.createTime}}</view>
				</view>
				<view class="flex align-center justify-between">
					<view>支付方式</view>
					<view v-if="Number(orderInfo.modeOfPayment) === 0">余额支付</view>
					<view v-if="Number(orderInfo.modeOfPayment) === 1">微信支付</view>
					<view v-if="Number(orderInfo.modeOfPayment) === 2">支付宝支付</view>
				</view>
			</view>
			<view class="box" v-if="orderInfo.transportImg" style="color: #999999;">
				<view class="titls">装货确认图片</view>
				<view style="margin-top: 20rpx;" class="imagess flex align-center justify-between">
					<image v-for="(item,index) in orderInfo.transportImg.split(',')" :src="item"
						style="width: 200rpx;height: 200rpx;border-radius: 24rpx;" mode="">
					</image>
				</view>
			</view>
			<view class="box" v-if="orderInfo.finishImg" style="color: #999999;">
				<view class="titls">订单确认图片</view>
				<view style="margin-top: 20rpx;" class="imagess flex align-center justify-between">
					<image v-for="(item,index) in orderInfo.finishImg.split(',')" :src="item"
						style="width: 200rpx;height: 200rpx;border-radius: 24rpx;" mode="">
					</image>
				</view>
			</view>


		</view>

		<view class="tabber">
			<view class="btn" v-if="orderInfo.indentState == 2" @click="closeOrder(indentId)">取消订单</view>
			<view class="btn2" v-if="orderInfo.indentState == 2" @click="arriveAddress(indentId)">抵达起点</view>
			<view class="btn2" style="width: 100%;" v-if="orderInfo.indentState == 3" @click="showUpImg(indentId)">
				开始运输</view>
			<view class="btn2" style="width: 100%;" v-if="orderInfo.indentState == 4" @click="startXh(indentId)">
				开始卸货</view>
			<view class="btn2" style="width: 100%;" v-if="orderInfo.indentState == 5" @click="showUpImgFis(indentId)">
				完成订单</view>
		</view>
		<u-popup v-model="showImg" border-radius="14" mode="bottom" :closeable="true">
			<view class="title">{{title}}</view>
			<view class="imageSuP flex align-center justify-center">
				<view class="imageSuP-box flex align-center justify-between flex-wrap">
					<view class="imageSuP-box-item" v-for="(item,index) in transportImg" :key="index">
						<image :src="item" mode=""></image>
						<view class="imageSuP-box-item-close">
							<u-icon name="close-circle" color="red" @click="deleteImg(index)" size="38"></u-icon>
						</view>
					</view>
					<view @click="addImage(1)" v-if="transportImg.length < 3"
						class="imageSuP-box-item imageSuP-box-items flex align-center justify-center flex-wrap">
						<u-icon name="photo" color="#000" size="48"></u-icon>
						<view class="imageSuP-box-item-txt">
							上传图片
						</view>
					</view>
					<view class="imageSuP-box-item" style="height: 0;"></view>
				</view>
			</view>
			<view class="tips flex align-center justify-center">
				<view class="tips-box">
					*请上传真实图片，虚假照片会给予封号处理
				</view>
			</view>
			<!-- 确认 -->
			<view class="querenBtn flex align-center justify-center">
				<view class="querenBtn-box flex align-center justify-center" @click="startYs()">
					确认
				</view>
			</view>
		</u-popup>
		<!-- 完成订单确认图片 -->
		<u-popup v-model="showImgFinsh" border-radius="14" mode="bottom" :closeable="true">
			<view class="title">{{title}}</view>
			<view class="imageSuP flex align-center justify-center">
				<view class="imageSuP-box flex align-center justify-between flex-wrap">
					<view class="imageSuP-box-item" v-for="(item,index) in finishImg" :key="index">
						<image :src="item" mode=""></image>
						<view class="imageSuP-box-item-close">
							<u-icon name="close-circle" color="red" @click="deleteImgFish(index)" size="38"></u-icon>
						</view>
					</view>
					<view @click="addImage(2)" v-if="finishImg.length < 3"
						class="imageSuP-box-item imageSuP-box-items flex align-center justify-center flex-wrap">
						<u-icon name="photo" color="#000" size="48"></u-icon>
						<view class="imageSuP-box-item-txt">
							上传图片
						</view>
					</view>
					<view class="imageSuP-box-item" style="height: 0;"></view>
				</view>
			</view>
			<view class="tips flex align-center justify-center">
				<view class="tips-box">
					*请上传真实图片，虚假照片会给予封号处理
				</view>
			</view>
			<!-- 确认 -->
			<view class="querenBtn flex align-center justify-center">
				<view class="querenBtn-box flex align-center justify-center" @click="startSuccess()">
					确认
				</view>
			</view>
		</u-popup>
	</view>
	</view>
	</view>
</template>

<script>
	import configdata from '../../common/config.js'
	export default {
		data() {
			return {
				showImgFinsh: false,
				showImg: false,
				orderInfo: {
					addressList:[]
				},
				indentId: '',
				title: '上传图片确认',
				transportImg: [],
				indentId: '',
				finishImg: []
			}
		},
		onLoad(option) {
			if (option.indentId) {
				this.indentId = option.indentId
				this.getOrderInfo()
			}
		},
		methods: {
			deleteImgFish(index) {
				this.finishImg.splice(index, 1)
			},
			//删除图片
			deleteImg(index) {
				this.transportImg.splice(index, 1)
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			//上传图片
			addImage(e) {
				let that = this
				let count = 3 - that.transportImg.length
				uni.chooseImage({
					count: count,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.showLoading({
								title: '加载中'
							});
							// console.log('开始上传图片')
							uni.uploadFile({ // 上传接口
								url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								// url: 'https://huodong.xianmxkj.com/sqx_fast/alioss/upload', //真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									uni.hideLoading();
									let url = JSON.parse(uploadFileRes.data)
									if (url.code == 0) {
										if (e === 1) { //装货图片
											that.transportImg.push(url.data)
										} else { //完成订单图片
											that.finishImg.push(url.data)
										}
									} else {
										uni.showToast({
											title: url.msg,
											icon: 'none',
											duration: 2000
										})
									}

								}
							});
						}
					}
				})
			},
			startSuccess() {
				if (this.finishImg.length < 3) {
					uni.showToast({
						title: '请上传三张真实图片确认',
						icon: 'none'
					})
					return
				}
				let indentId = this.indentId
				this.showImgFinsh = false
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认订单已完成？若未完成，将扣除保证金',
					confirmText: '确认',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								indentId: indentId,
								userId: uni.getStorageSync('userId'),
								finishImg: that.finishImg.join(',')
							}
							that.$Request.postT('/app/indent/riderDelivery', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '订单完成'
									})
									that.getOrderInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			startXh(indentId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认开始卸货？',
					confirmText: '确认',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								indentId: indentId,
								userId: uni.getStorageSync('userId')
							}
							that.$Request.postT('/app/indent/riderUnload', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '开始卸货'
									})
									that.getOrderInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			showUpImg(indentId) {
				this.indentId = indentId
				this.showImg = true
			},
			showUpImgFis(indentId) {
				this.indentId = indentId
				this.showImgFinsh = true
			},
			openMap(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			//开始运输
			startYs() {
				if (this.transportImg.length < 3) {
					uni.showToast({
						title: '请上传三张真实图片确认',
						icon: 'none'
					})
					return
				}
				let indentId = this.indentId
				this.showImg = false
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认开始运输？',
					confirmText: '确认',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								indentId: indentId,
								userId: uni.getStorageSync('userId'),
								transportImg: that.transportImg.join(',')
							}
							that.$Request.postT('/app/indent/riderStartTransport', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '开始运输'
									})
									that.getOrderInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			//抵达起点
			arriveAddress(indentId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认已到达起点？',
					confirmText: '确认',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								indentId: indentId
							}
							that.$Request.postT('/app/indent/riderShipment', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '已抵达起点'
									})
									that.getOrderInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			//取消订单
			closeOrder(indentId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '取消订单将会被扣保证金',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								indentId: indentId
							}
							that.$Request.postT('/app/indent/riderCancelIndent', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '订单已取消',
										icon: "none"
									});
									that.getOrderInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			//加密中间四位
			maskPhoneNumber(phoneNumber) {
				// 将手机号码转换为字符串类型，并根据其长度确定要替换的位数
				if (phoneNumber) {
					phoneNumber = phoneNumber.toString() //先强制转换成字符串类型
					return phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
				}

			},
			//获取订单详情
			getOrderInfo() {
				let data = {
					indentId: this.indentId
				}
				this.$Request.getT('/app/indent/riderGetIndentInfo', data).then(res => {
					if (res.code == 0) {
						this.orderInfo = res.data
						if (this.orderInfo.indentDistance > 1) {
							this.orderInfo.indentDistance = this.orderInfo.indentDistance + 'km'
						} else {
							this.orderInfo.indentDistance = (this.orderInfo.indentDistance * 1000).toFixed(2) + 'm'
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.tips {
		width: 100%;
		margin-top: 20rpx;

		.tips-box {
			width: 686rpx;
			color: red;
		}
	}

	.querenBtn {
		width: 100%;
		height: 80rpx;
		margin: 40rpx 0;

		.querenBtn-box {
			width: 686rpx;
			height: 100%;
			background-color: #02B595;
			color: #FFFFFF;
			border-radius: 24rpx;
		}
	}

	.title {
		width: 100%;
		text-align: center;
		margin-top: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.imageSuP {
		width: 100%;
		margin-top: 20rpx;

		.imageSuP-box {
			width: 686rpx;
			height: 100%;
		}

		.imageSuP-box-items {
			border: 1px dashed #000;
		}

		.imageSuP-box-item-close {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
		}

		.imageSuP-box-item {
			width: 200rpx;
			height: 200rpx;
			align-content: center;
			border-radius: 20rpx;
			position: relative;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
			}
		}

		.imageSuP-box-item-txt {
			width: 100%;
			text-align: center;
			margin-top: 10rpx;
		}
	}

	.headtop {
		width: 100%;
		height: 325rpx;
		background: linear-gradient(to bottom, #02B595 5%, #F5F5F5 90%);
		position: fixed;
		top: 0;
		z-index: 1;
	}

	.content {
		position: relative;
		z-index: 99;
	}

	.titl {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin: 30rpx;
	}

	.boxa {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx 0;
	}

	.box {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		margin: 30rpx;

	}

	.titls {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.bb {
		width: 110rpx;
		height: 38rpx;
		// background: #49A5FF;
		// opacity: 0.32;
		background-color: rgba(73, 165, 255, 0.3);
		border-radius: 4rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #359CFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}

	.addbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 16rpx;

	}

	.add_cont {
		display: flex;
		align-items: center;
	}

	.add_tit {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.gray {
		width: 16rpx;
		height: 16rpx;
		background: #cccccc;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.tabber {
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx 40rpx;

		.btn {
			width: 330rpx;
			height: 78rpx;
			border: 1px solid #A0A0A0;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #9C9C9C;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn1 {
			width: 330rpx;
			height: 78rpx;
			background: #346EF6;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn2 {
			width: 330rpx;
			height: 78rpx;
			background: #02B595;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>